<template>
  <div class="app-container">
    <div style="margin-left: 3%;margin-top: 20px">

      <el-button
        type="primary"
        plain
        icon="el-icon-plus"
        size="mini"
        @click="openDialog(-1)"
        v-hasPermi="[`${this.permissions}`+':add']">新增项目
      </el-button>
    </div>

    <div>
      <el-table  :data="projectList" style="margin:20px 20px 3% 3%;width: 95%;font-size: 16px;!important;">
        <!--:header-cell-style="{background:'rgba(0,0,0,0.1)',color:'#606266'}"-->
        <el-table-column label="项目名称" prop="name"  :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <a v-if="!checkPermi([`${permissions}`+':devUnit:epc:list'])" >{{scope.row.name}}</a>
            <a  @click="goToFilePage(scope.row)"
                v-hasPermi="[`${permissions}`+':devUnit:epc:list']" style="cursor:pointer">{{scope.row.name}}</a>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-view"
              @click="goToFilePage(scope.row)"
              v-hasPermi="[`${permissions}`+':devUnit:epc:list']"
            >数据管理</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="openDialog(scope.$index)"
              v-hasPermi="[`${permissions}`+':edit']"
            >修改</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="deleteProject(scope.row.id)"
              v-hasPermi="[`${permissions}`+':remove']"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
   <!-- <div style="text-align: center">
      <el-pagination  @current-change="handleChooseCurrentChange" @size-change="handleChooseSizeChange" :current-page="infoListInfo.pageNum"
                      :page-sizes="[5, 10, 15, 20]" :page-size="infoListInfo.pageSize" :total="infoListInfo.total" layout="total, sizes, prev, pager, next, jumper" background>
      </el-pagination>

    </div>-->


    <!-- 添加或修改角色配置对话框 -->
    <el-dialog :title="title" :visible.sync="dialogVisible" width="50%" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="项目名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入项目名称" />
        </el-form-item>
        <el-form-item label="项目简介" prop="introduce">
          <el-input
            type="textarea"
            :autosize="{ minRows: 5}"
            placeholder="请输入项目简介"
            v-model="form.introduce">
          </el-input>
        </el-form-item>
        <el-form-item label="施工单位" prop="constructionUnit">
          <el-input v-model="form.constructionUnit" placeholder="请输入施工单位" />
        </el-form-item>
        <el-form-item label="监理单位" prop="supervisionUnit">
          <el-input v-model="form.supervisionUnit" placeholder="请输入监理单位" />
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
import { listRole, getRole, delRole, addRole, updateRole, dataScope, changeRoleStatus } from "@/api/system/role";
import { treeselect as menuTreeselect, roleMenuTreeselect } from "@/api/system/menu";
import { treeselect as deptTreeselect, roleDeptTreeselect } from "@/api/system/dept";
import { getAllProjects ,addProject, updateProject,deleteProject} from "@/api/epcManagement/index";
import {getList} from '@/api/devUnit/organization'
import {checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数

export default {
  name: "Role",
  dicts: ['sys_normal_disable'],
  data() {
    return {
      menuParam:{},//页面参数
      projectList:[],
      infoListInfo: {
        // 当前的页数
        pageNum: 1,
        // 当前每页显示多少条数据
        pageSize: 1000,
        // 表格总行数
        total: 0
      },
      dev:'',
      permissions: '',
      deleteVisible:false,

      // 项目对应文件查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: undefined,
        fileType: undefined,
        secondDirectory: undefined,
      },
      // 表单参数
      form: {
        name:'',
        introduce:'',
        constructionUnit:'',
        supervisionUnit:'',
        id: '',
      },
      title:'',
      dialogVisible:false,

      // 表单校验
      rules: {
        name: [
          { required: true, message: "项目名称不能为空", trigger: "blur" }
        ],
        introduce: [
          { required: true, message: "项目简介不能为空", trigger: "blur" }
        ],
        constructionUnit: [
          { required: true, message: "施工单位不能为空", trigger: "blur" }
        ],
        supervisionUnit: [
          { required: true, message: "监理单位不能为空", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    this.menuParam=this.$route.query

    const { params, query } = this.$route
    if(query.permissions != null){
      this.permissions = query.permissions
      // this.dev = 'devUnit:epc'
    }
    console.log(this.permissions)

    this.getAllProjects()

  },
  methods: {
    checkPermi,
    checkRole,

    getAllProjects(){
      const menu = this.$route.query.menu;
      const name = this.$route.query.name;
      getAllProjects(this.infoListInfo.pageSize,this.infoListInfo.pageNum,menu,name).then(res => {
        this.projectList=res.data.projectList
        this.infoListInfo.total = res.data.totalNum;

        //console.log(res)

      });

    },
    //指标分页页码改变
    handleChooseCurrentChange(newPage) {
      this.infoListInfo.pageNum = newPage
      this.getAllProjects()
    },
    handleChooseSizeChange(pageSize) {
      this.infoListInfo.pageSize = pageSize
      this.getAllProjects()
    },

    //数据管理，跳转文件页面
    goToFilePage(projectInfo){
      const id=projectInfo.id
      this.$router.push({path:'/epcManagement/epcManagement/file',query: {menu: this.menuParam.menu, name: this.menuParam.name ,projectId:id,permissions:"devUnit:epc",projectInfo:projectInfo}})
    },

    //删除项目 通过项目id
    deleteProject(id) {
      let htmlInfo = {'bucketName':this.menuParam.menu,'firstDirectory':this.menuParam.name,'sectionProjectId':id}
      getList(Object.assign(this.queryParams, htmlInfo)).then(res => {
        //如果项目中有文件，跳转
        if(res.total!==0){
          this.$confirm('当前项目中仍有文件未删除，需要删除当前项目全部文件后才能删除项目', '提示', {
            confirmButtonText: '前往删除文件',
            cancelButtonText: '取消删除',
            type: 'warning'
          }).then(() => {
            this.goToFilePage(id)// 确定操作
          }).catch(() => {  // 取消操作
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
        }
        //项目中没有文件，删除。
        else{
          this.$confirm('您确定删除当前项目吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {   // 确定操作
            deleteProject(id).then(res => {
              console.log(res)
              if (res.code == 200) {
                this.getAllProjects()
                this.$message({
                  message: "删除项目成功",
                  type: 'success'
                });

              } else {
                this.$message({
                  message: "删除项目失败",
                  type: 'error'
                });
              }
            })
          }).catch(() => {  // 取消操作
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
        }
      })

    },

    //打开新增或修改项目弹窗 index=-1新增，否则修改
    openDialog(index){
      this.form = {
        name: '',
        introduce: '',
        constructionUnit: '',
        supervisionUnit: '',
        id: ''
      }

      console.log(index)
      if(index==-1){
        this.title="新增项目"
      }
      else {
        //console.log(index)
        this. title="修改项目"
        this.form= this.projectList[index]
        //console.log(this.form)
      }
      this.dialogVisible=true;
    },

    //新增或修改项目的提交
    submitForm(){
      //新增
      if(this.form.id==''||this.form.id==null){

        this.$refs.form.validate({})
          .then(() => {
          addProject(this.form.name, this.form.introduce, this.form.constructionUnit,
            this.form.supervisionUnit, this.menuParam.menu, this.menuParam.name).then(res => {
            if (res.code == 200) {
              this.getAllProjects();
              this.$message({
                message: "新增项目成功",
                type: 'success'
              });

            } else {
              this.$message({
                message: "新增项目失败",
                type: 'error'
              });
            }
            this.form = {
              name: '',
              introduce: '',
              constructionUnit: '',
              supervisionUnit: '',
              id: ''
            }
            this.dialogVisible = false

          });
        }) .catch(({ }) => {
        })

      }
      //修改
      else{
        this.$refs.form.validate({})
          .then(() => {
          updateProject(this.form.id, this.form.name, this.form.introduce, this.form.constructionUnit,
            this.form.supervisionUnit).then(res => {
            if (res.code == 200) {
              this.getAllProjects();
              this.$message({
                message: "修改项目成功",
                type: 'success'
              });

            } else {
              this.$message({
                message: "修改项目失败",
                type: 'error'
              });
            }
            this.form = {
              name: '',
              introduce: '',
              constructionUnit: '',
              supervisionUnit: '',
              id: ''
            }
            this.dialogVisible = false

          });
        }).catch(({ }) => {
        })
      }
    },

    //新增或删除 取消提交
    cancel(){
      this.form={
        name:'',
        introduce:'',
        constructionUnit:'',
        supervisionUnit:'',
        id: ''
      }
      this.getAllProjects()
      this.dialogVisible=false
    }


  }
};
</script>

<style scoped lang="scss">
  .box-card {
    width:100%;
    height:380px;
    margin-bottom: 40px;
    position: relative;
    min-width: 400px;
  }
  .card-title{
    width:85%;
    overflow: hidden;
    display: inline-block;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .card-footer{
    position: absolute;
    bottom: 5%;
    width:90%;
    text-align: right;
    //padding-right: 30px;
  }
</style>

